@import "../../../common/common.less";

.statistics {
  .chartArea {
    margin-bottom: @commonPaddingOutside;
    border-radius: @commonBorderRadius;
    background: @allWhite;
    padding-top: @commonPaddingOutside;

    #my_chart {
      width: 100%;
      height: 360px;
    }

    .chartHeader {
      display: flex;
      justify-content: space-between;
      padding: @commonPaddingOutside @commonPaddingOutside*2;

      .tabs {
        display: flex;
        .tabItem{
          cursor: pointer;
          padding: @commonPaddingOutside @commonPaddingOutside*2;
          border: 1px solid @borderGrayColor;
          &:first-child{
            border-top-left-radius: @commonBorderRadius;
            border-bottom-left-radius: @commonBorderRadius;
          }
          &:last-child{
            border-top-right-radius: @commonBorderRadius;
            border-bottom-right-radius: @commonBorderRadius;
          }
          &.active{
            border-color: @allPrimaryColor;
            color: @allWhite;
            background: @allPrimaryColor;
          }
        }
      }

      .timeSelect {
        .selectInput {
          margin-left: @commonPaddingOutside;
        }
      }
    }
  }
  .total-box {
    flex: 1;
    display: flex;
    align-items: center;

    .total-info {
      margin-left: 25px;
      font-size: 14px;
      color: @fontColor;
      line-height: 20px;

      span {
        font-size: 16px;
        color: @allWarringColor;
      }
    }
  }
}
